<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>indexDB 学习</title>
    <link href="./css/index.css" rel="stylesheet" />
    <!-- 引入封装的操作数据库相关方法   -->
    <script src="./db/index.js" type="module"></script>
    <!-- 引入Jquery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- 业务逻辑js -->
    <script src="./js/index.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="container-card">
        <form class="my-form" id="form">
          <label>
            <span class="label">姓名:</span>
            <input name="name" placeholder="请输入姓名" type="text" />
          </label>
          <label>
            <span class="label">年龄:</span>
            <input name="age" placeholder="年龄" type="number" />
          </label>
          <label>
            <span class="label">部门:</span>
            <select name="dept">
              <option value="移动开发部">移动开发部</option>
              <option value="测试部">测试部</option>
              <option value="设计部">设计部</option>
            </select>
          </label>
          <button id="submit" type="submit">录入</button>
          <button type="reset">清除</button>
        </form>

        <form class="my-form">
          <label>
            <span class="label">id:</span>
            <input
              id="searchByIdIpt"
              name="id"
              placeholder="id"
              type="number"
            />
          </label>
          <button id="searchById" type="submit">通过id查询单条</button>
        </form>

        <form class="my-form">
          <span class="label">其他操作:</span>
          <button id="search" type="submit">查询全部</button>
          <button id="clearAll" type="submit">删除全部数据</button>
        </form>

        <table class="my-table" id="my-table">
          <thead>
            <tr>
              <td>id</td>
              <td>姓名</td>
              <td>年龄</td>
              <td>部门</td>
              <td>时间</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </body>
</html>
